<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>数据字典项 - TyFast Platform</title>
</head>
<body>
  <!--/* 数据字典项代码片段 */-->
  <th:block th:fragment="items">
    <!-- 右侧抽屉窗口 :: 字典项列表 -->
    <v-navigation-drawer fixed temporary right :stateless="winFormDrawer" :width="winDrawerWidth" v-model="winDrawer">
      <v-sheet>
        <v-app-bar flat absolute dark color="indigo darken-2">
          <v-toolbar-title class="text-subtitle-1 font-weight-bold">{{currentName}} :: {{$t('字典项列表')}}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="closeWinDrawer">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-app-bar>
        <v-card flat tile class="pb-13 pt-14">
          <v-container>
            <v-row>
              <v-col>
                <v-btn depressed color="info" class="pr-5 pl-4" @click="openWinFormDrawer('新增字典项')" shiro:hasPermission="/system/dict/item/merge">
                  <v-icon small>mdi-plus</v-icon>
                  {{$t('新增')}}
                </v-btn>
              </v-col>
            </v-row>

            <!-- 字典项数据列表 -->
            <v-data-table
                :headers="datatableItems.headers"
                :items="datatableItems.items"
                item-key="value"
                hide-default-footer
                disable-sort
                disable-pagination
                fixed-header
                :loading="loading"
            >
              <template v-slot:item.operation="{item, index}" shiro:hasPermission="/system/dict/item/merge">
                <a class="mr-2" @click="openWinFormDrawer('修改字典项', item, index)" v-t="'修改'"></a>
                <v-btn-confirm :data="index" @confirm="doDeleteItem"></v-btn-confirm>
              </template>
            </v-data-table>
          </v-container>
        </v-card>
      </v-sheet>
      <v-footer fixed class="border-top justify-end" :color="vdark? null : 'white'">
        <v-btn depressed outlined text class="mr-4" @click="closeWinDrawer" v-t="'关闭'"></v-btn>
      </v-footer>
    </v-navigation-drawer>

    <!-- 右侧抽屉窗口 :: 字典项表单 -->
    <v-navigation-drawer fixed temporary right stateless :width="winFormDrawerWidth" v-model="winFormDrawer" style="z-index:10">
      <validation-observer ref="itemObserver" v-slot="{handleSubmit}">
        <v-form ref="itemDataForm" @submit.prevent="handleSubmit(doItemSubmit)">
          <v-sheet>
            <v-app-bar flat absolute dark color="indigo darken-2">
              <v-toolbar-title class="text-subtitle-1 font-weight-bold">{{$t(drawerTitle)}}</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-btn icon :disabled="posting" @click="closeWinFormDrawer">
                <v-icon>mdi-close</v-icon>
              </v-btn>
            </v-app-bar>
            <v-sheet class="pb-13 pt-16">
              <v-container>
                <validation-provider v-slot="{ errors }" name="字典项名称" rules="required|max:30">
                  <v-text-field outlined dense clearable type="text" :error-messages="errors" v-blank v-model.trim="formDataItem.text" :label="$t('字典项名称')"></v-text-field>
                </validation-provider>
                <validation-provider v-slot="{ errors }" name="值" rules="required|max:18|check:checkItemValue">
                  <v-text-field outlined dense clearable type="text" :error-messages="errors" v-blank v-model.trim="formDataItem.value" :label="$t('值')"></v-text-field>
                </validation-provider>
              </v-container>
            </v-sheet>
          </v-sheet>
          <v-footer fixed class="border-top justify-end" :color="vdark? null : 'white'">
            <v-btn depressed outlined text class="mr-4" :disabled="posting" @click="closeWinFormDrawer" v-t="'关闭'"></v-btn>
            <v-btn depressed color="info" type="submit" :loading="posting">{{$t('保存')}}</v-btn>
          </v-footer>
        </v-form>
      </validation-observer>
    </v-navigation-drawer>

    <!-- 业务js -->
    <script type="text/javascript" th:src="@{/js/system/dict/dict-item.js?_t=#buildtime#}"></script>
  </th:block>
</body>
</html>
